<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="number-range">
    <el-row>
      <el-col :span="10">
        <el-input-number
          v-model="start"
          controls-position="right"
          size="small"
          :min="minRows"
          :max="maxRows"
          :step="step"
          :disabled="disabled"
          :placeholder="placeholder"
          @change="updateValue"
        ></el-input-number>
      </el-col>
      <el-col :span="2" style="text-align: center">-</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="end"
          controls-position="right"
          size="small"
          :min="minRows"
          :max="maxRows"
          :step="step"
          :disabled="disabled"
          :placeholder="placeholder"
          @change="updateValue"
        ></el-input-number>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mixinCustomEvent from "../customEvent";
export default {
  name: "numberRange",
  mixins: [mixinCustomEvent],
  props: {
    column: {
      type: Object,
      default: () => {},
    },
    // 已经选择的对象
    value: {
      type: [Array, String],
      default: () => [],
    },
  },
  data() {
    return {
      start: undefined,
      end: undefined,
    };
  },
  computed: {
    minRows() {
      if (this.column && (this.column.minRows || this.column.minRows === 0)) {
        return this.column.minRows;
      }
      return undefined;
    },
    maxRows() {
      if (this.column && (this.column.maxRows || this.column.maxRows === 0)) {
        return this.column.maxRows;
      }
      return undefined;
    },
    step() {
      if (this.column) {
        return this.column.step || undefined;
      }
      return undefined;
    },
    disabled() {
      if (this.column) {
        return this.column.disabled || undefined;
      }
      return undefined;
    },
    placeholder() {
      if (this.column) {
        return this.column.placeholder || undefined;
      }
      return undefined;
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val.length) {
          this.start = val[0];
          if (val.length > 1) {
            this.end = val[1];
          }
        } else {
          this.start = undefined;
          this.end = undefined;
        }
      },
      deep: true,
    },
    start(val) {
      if (val != undefined && this.end != undefined && val > this.end) {
        this.end = undefined;
        this.$message.warning("结束值不能小于开始值");
      }
    },
    end(val) {
      if (val != undefined && this.start != undefined && val < this.start) {
        this.start = undefined;
        this.$message.warning("开始值不能大于结束值");
      }
    },
  },
  methods: {
    updateValue() {
      console.log(this.start, this.end);
      this.$emit("input", [this.start, this.end]);
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
.number-range {
  ::v-deep(.el-input-number) {
    width: 100%;
  }
}
</style>
